<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重力加速</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #circle {
            height: 100px;
            width: 100px;
            background-color: #FF0000;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 50%;
        }
    </style>
</head>
<body style="height: 100%;width: 100%;">
<div id="circle"></div>
</body>

<script>
    var circle = document.getElementById("circle");//圆
    var timer = null;
    var speed = 10;
    var maxHeight = (document.body.scrollHeight || document.documentElement.scrollHeight) - circle.offsetHeight;//获取最大高度  最大高度  = 屏幕高度- 球的高度   屏幕高度有兼容型  body.scrollHeight - documentElement.scrollHeight;
    var  timerX   = null;

    timer = setInterval(function () {
        circle.style.top = circle.offsetTop + (speed ++)+ "px";
        if (circle.offsetTop >= maxHeight) {  //到达临界值  反弹
            circle.style.top = maxHeight + "px";
            speed = -speed*0.6;
            if (Math.abs(speed)<=3){ //当速度衰减到一定的值时 不让其运动
                clearInterval(timer);
                setTimeout(function(){
                    clearInterval(timerX);
                },1000)

            }
        }
    }, 50);

    var speedX = 4;
    timerX = setInterval(function(){
        speedX= speedX*0.999;
        circle.style.left = circle.offsetLeft+(speedX)+"px";
    },100);


    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return parseInt(obj.currentStyle[attr]);
        } else {
            return parseInt(window.getComputedStyle(obj)[attr]);
        }
    }
</script>
</html>